<!--
*@Author: zt
*@Description: 请假，离蓉，加班的卡片入口
*@Date: 2024-08-20
-->
<template>
  <u-card class="f-h-100 u-work-applicant-new-card" v-bind="$attrs">
    <a-list
      :grid="{ gutter: [16, 16], column: column }"
      :data-source="cardData"
      class="f-h-100"
    >
      <template #renderItem="{ item }">
        <a-list-item
          style="height: 100%; padding: 10px 20px"
          :style="itemStyle"
          class="f-cursor u-card-item f-item-hover"
          @click="(busiType = item.type), (showEdit = true)"
        >
          <a-row align="middle">
            <div :style="{ background: item.bgColor }" class="u-icon-box">
              <u-icon-font :type="item.icon" style="color: #fff"></u-icon-font>
            </div>
            <a-space direction="vertical" class="f-margin-l12">
              <span class="u-span-label f-font-family">{{ item.label }}</span>
              <span class="u-span-desc f-font-family">{{ item.desc }}</span>
            </a-space>
          </a-row>
        </a-list-item>
      </template>
    </a-list>
  </u-card>

  <!-- 考勤编辑 -->
  <VacatEdit
    v-model:open="showEdit"
    :busiType="busiType"
    @success="emits('success'), (showEdit = false)"
    wrap-class-name="full-modal"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import VacatEdit from './VacatEdit.vue';
interface Props {
  column?: number;
  itemStyle?: {};
}
withDefaults(defineProps<Props>(), {
  column: 2,
  itemStyle: {
    background: '#fff',
  },
});

const emits = defineEmits(['success']);

const cardData = reactive([
  {
    type: '2',
    label: '请假申请',
    desc: '发起各类请假、调休',
    icon: 'icon-qingjia',
    bgColor: '#1890FF',
  },
  {
    type: '1',
    label: '加班申请',
    desc: '快速填报加班申请',
    icon: 'icon-jiaban',
    bgColor: '#52C41A ',
  },
  {
    type: '3',
    label: '离驻地报备',
    desc: '需要外出离驻地报备',
    icon: 'icon-a-lujing81',
    bgColor: '#FA8C16',
  },
]);

// 打开编辑
let showEdit = ref<boolean>(false);
let busiType = ref<string>('');
</script>

<style lang="scss">
.u-work-applicant-new-card {
  background: transparent;

  .ant-card-body {
    height: 100%;
    padding: 2px !important;
    overflow: hidden !important;
  }

  .u-card-item {
    border-radius: 16px;
  }

  .ant-spin-nested-loading {
    height: 100%;
  }

  .ant-spin-container {
    height: 100%;

    &:first-child {
      .ant-row {
        height: 100%;

        .ant-col {
          height: 100%;
        }
      }
    }
  }
}

.u-icon-box {
  height: 40px;
  width: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px;
}

.u-span-label {
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #333333;
}

.u-span-desc {
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
</style>
